<template>
    <div>
        {{ cat }}
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="changeCat">changeCat</button>
    </div>
</template>

<script setup>
/**
 * reactive函数
    * 作用：通常用来定义对象类型（对象、数组和Map、set这样的集合类型）的响应式数据
    * 使用：
        * 1、从vue中导入reactive函数
        * 2、使用reactive函数，传入一个普通对象，返回一个响应式对象
    * 注意：
        * 1、不能用于如String、Number、Boolean这样的原始类型
        * 2、如果替换整个对象（直接使用 = 给 reactive 变量重新赋值），将失去响应式
 */

// 从vue中导入reactive函数
import { reactive } from 'vue'
// 定义响应式数据对象
let cat = reactive({
    name: '小白脚',
    age: 3
})
// 定义改变对象属性的方法
const changeName = () => {
    cat.name = '小黑脚'
}
const changeAge = () => {
    cat.age++
}
const changeCat = () => {
    cat = {
        name: '面包',
        age: 2
    }
    console.log(cat)
}
// reactive 不能用于如String、Number、Boolean这样的原始类型
// let x = reactive(1)
</script>

<style lang="scss" scoped></style>